<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据看板</title>
    <link rel="stylesheet" type="text/css" href="./css/element.css" />
    <link rel="stylesheet" href="./css/main.css" />
  </head>

  <body>
    <div id="index">
      <!-- 顶部header -->
      <div class="header">
        <div class="header-left">
          <!-- <img src="./img/logo.png" alt=""> -->
          <span>数据看板</span>
        </div>
        <div class="header-tab">
          <!-- 修改部分 -->
          <div
            v-for="item,index in headerTab"
            :class="headerAct==index?'active':''"
            @click="toRouter(index)"
          >
            {{item}}
          </div>
        </div>
        <div class="header-right">
          <div class="header-user">
            <span>您好，admin</span>
            <i class="el-icon-arrow-down" color="#005fd4"></i>
          </div>
          <div class="line"></div>
          <img class="header-btn" src="./img/header-btn.png" alt="" />
        </div>
      </div>
      <div class="page-content">
        <!-- 修改部分 将time-sel移到这里了 -->
        <div class="time-sel">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
          <!-- <el-select style="width: 350px;" v-model="value" multiple placeholder="请选择">
                    <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                        <el-option v-for="item in group.options" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-option-group>
                </el-select> -->
          <el-popover
            class="top-popover"
            placement="bottom"
            width="431"
            trigger="click"
          >
            <div class="top-popover-div">
              <div class="search-name-box">
                <span>名称包含</span>
                <el-input
                  style="width: 50%; min-width: 200px"
                  size="mini"
                  v-model="searchName"
                ></el-input>
              </div>
              <div v-for="item,index in options">
                <div
                  :class="topSel.indexOf(item1.label)!=-1 ?'active':''"
                  v-for="item1,index1 in item.options"
                  @click="topSelChange(item1)"
                >
                  {{item1.label}}
                </div>
              </div>
            </div>
            <div class="top-sel" slot="reference">
              <div class="sel-div">
                <span v-if="topSel.length==0">请选择</span>
                <div v-for="item,index in topSel">
                  {{item}}
                  <img
                    @click.stop="topSelClose(item)"
                    src="./img/close.png"
                    alt=""
                  />
                </div>
              </div>
              <div class="search-btn" @click.stop>
                <img src="./img/search.png" alt="" />
                搜索
              </div>
            </div>
          </el-popover>
        </div>
        <div class="page-left view-500">
          <div class="left-view1">
            <div class="main-title">
              <div class="background-left"></div>
              <div class="background" v-for="item,index in 3"></div>
              <div class="background-right"></div>
              <span class="text">两个细则偏差考核（年度）</span>
              <div class="unit">单位：次</div>
            </div>
            <div class="view-content" id="charts-line1"></div>
          </div>
          <div class="left-view2">
            <div class="main-title">
              <div class="background-left"></div>
              <div class="background" v-for="item,index in 3"></div>
              <div class="background-right"></div>
              <span class="text"> 现货考核 </span>
              <div class="unit">单位：百分比</div>
            </div>
            <div class="view-content" id="bar-3D"></div>
          </div>
        </div>
        <div class="page-center view-800">
          <div class="center-view1">
            <div class="main-title">
              <div class="background-left"></div>
              <div class="background" v-for="item,index in 3"></div>
              <div class="background-right"></div>
              <span class="text">日考核</span>
            </div>
            <div class="view-content right-table">
              <div class="table center-table">
                <div class="table-th">
                  <!-- 修改部分  加了text-left-->
                  <div class="w-20 text-left">机组名称</div>
                  <div class="w-20">现货考核值</div>
                  <div class="w-20">两个细则考核值</div>
                  <div class="w-20">本地计算考核值</div>
                  <div class="w-20">免考值</div>
                </div>
                <div class="table-tr scroll">
                  <div class="tr" v-for="item,index in rightList">
                    <!-- 修改部分  加了text-left-->
                    <div class="w-20 text-left">AE86</div>
                    <div class="w-20">66552.32Kwh</div>
                    <div class="w-20 blue">1522.35/5556.15</div>
                    <div class="w-20">SH65559866699</div>
                    <div class="w-20">66552.32Kwh</div>
                  </div>
                </div>
              </div>
              <div class="pagination">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="10"
                  :total="200"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <div class="page-right view-500">
          <div class="right-view1">
            <div class="main-title">
              <div class="background-left"></div>
              <div class="background" v-for="item,index in 3"></div>
              <div class="background-right"></div>
              <span class="text">容量电价</span>
            </div>
            <div class="view-content right-table">
              <div class="table">
                <div class="table-th">
                  <div class="w-20">日期</div>
                  <div class="w-30">机组</div>
                  <div class="w-30">考核原因</div>
                  <div class="w-20">次数</div>
                </div>
                <div class="table-tr scroll">
                  <div class="tr" v-for="item,index in rightList">
                    <div class="w-20">2023.08.31</div>
                    <div class="w-30">AE86</div>
                    <div class="w-30 blue">机器可能出现故障</div>
                    <div class="w-20">20</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-view2">
            <div class="main-title">
              <div class="background-left"></div>
              <div class="background" v-for="item,index in 3"></div>
              <div class="background-right"></div>
              <span class="text">抽查次数</span>
              <div class="unit">单位：次</div>
            </div>
            <div class="view-content" id="charts-bar3D"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 引入jq -->
    <script type="text/javascript" src="./js/jquery.js"></script>
    <!-- 引入echarts -->
    <script type="text/javascript" src="./js/echarts.js"></script>
    <!-- 引入vue2 -->
    <script type="text/javascript" src="./js/vue2.js"></script>
    <!-- 引入vue无缝滚动插件 -->
    <script src="./js/vue-seamless-scroll.min.js"></script>
    <script type="text/javascript" src="./js/charts.js"></script>
    <!-- 引入element2.15.14版本 -->
    <script src="./js/element.js"></script>
    <!-- 引入自己写的js -->
    <script type="text/javascript" src="./js/main.js"></script>

    <script>
      // 使用html引入的vue
      new Vue({
        el: "#index",
        name: "index",
        computed: {
          defaultOption() {
            return {
              step: 0.1, // 数值越大速度滚动越快
              limitMoveNum: 20, // 开始无缝滚动的数据量 this.dataList.length
              hoverStop: true, // 是否开启鼠标悬停stop
              direction: 1, // 0向下 1向上 2向左 3向右
              openWatch: true, // 开启数据实时监控刷新dom
              singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
              singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
              waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
          },
        },
        data: function () {
          return {
            searchName: undefined,
            headerAct: 0,
            headerTab: ["关键指标", "实时平衡", "发电校核", "机组管理"],
            topList: [
              { name: "当日受阻率", text: "1%", img: "./img/icon-0.png" },
              { name: "年度受阻率", text: "2%", img: "./img/icon-1.png" },
              { name: "当日非停率", text: "2%", img: "./img/icon-2.png" },
              { name: "年度非停率", text: "4%", img: "./img/icon-3.png" },
              {
                name: "当日最小正备用",
                text: "5万千瓦",
                img: "./img/icon-4.png",
              },
              { name: "发生时刻", text: "21:00", img: "./img/icon-5.png" },
            ],
            // tooltips参数可以直接放在rightlist里 然后循环展示
            rightList: [
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
            ],
            value1: "",
            value2: "",
            value: "",
            options: [
              {
                label: "数据1",
                options: [
                  {
                    value: "市调",
                    label: "市调",
                  },
                  {
                    value: "网调",
                    label: "网调",
                  },
                  {
                    value: "省调",
                    label: "省调",
                  },
                  {
                    value: "地调",
                    label: "地调",
                  },
                ],
              },
              {
                label: "数据2",
                options: [
                  {
                    value: "武汉",
                    label: "武汉",
                  },
                  {
                    value: "黄石",
                    label: "黄石",
                  },
                  {
                    value: "襄阳",
                    label: "襄阳",
                  },
                  {
                    value: "荆州",
                    label: "荆州",
                  },
                  {
                    value: "宜昌",
                    label: "宜昌",
                  },
                  {
                    value: "十堰",
                    label: "十堰",
                  },
                  {
                    value: "孝感",
                    label: "孝感",
                  },
                  {
                    value: "荆门",
                    label: "荆门",
                  },
                ],
              },
              {
                label: "数据3",
                options: [
                  {
                    value: "火电",
                    label: "火电",
                  },
                  {
                    value: "水电",
                    label: "水电",
                  },
                  {
                    value: "风电",
                    label: "风电",
                  },
                  {
                    value: "集中式光伏",
                    label: "集中式光伏",
                  },
                  {
                    value: "分布式光伏",
                    label: "分布式光伏",
                  },
                ],
              },
            ],
            topSel: [],
          };
        },
        mounted() {
          // var data = [{ value: 1227, name: "供热受阻" },
          // { value: 100, name: "机组受阻" },
          // { value: 230, name: "电网受阻" },]
          // // getPei('charts-pei1', data)
          // var Xdata = ['丹江', '黄龙滩', '潘口', '老渡口', '洞坪', '寺坪', '三里坪']
          // var Xdata1 = ['700/278', '60/2', '50/11', '0/0', '7/3', '3/1', '2/1']
          // var data1 = [4000, 2000, 3600, 4200, 2800, 5800, 8300]
          getLine1("charts-line1");

          let data3D1 = [
            {
              name: "数据",
              data_a: [
                1008.8, 915.36, 1048.16, 1320.32, 1323.84, 1206.72, 1172.48,
                1288.96, 830.4,
              ],
              unit: "单位:kw",
              index: 0,
            },
          ];
          var data3D = {
            Xdata: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            data1: [484.4, 70.6, 0.0, 492.36, 4.08, 1116.64],
            data2: [482.4, 69.2, 0.0, 365.4, 4.32, 1042.56],
            data3: [1054.4, 491.8, 0.0, 814.56, 8.4, 2231.52],

            data4: [48.4, 7.6, 0.0, 49.36, 1.08, 111.64],
            data5: [58.4, 8.2, 2.0, 46.4, 1.32, 124.56],
            data6: [105.4, 49.8, 0.0, 81.56, 1.4, 223.52],
          };

          var Xdata = [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ];
          viewCharts1("bar-3D", data3D);
          barCharts2("charts-bar3D", data3D1, Xdata, 16);
        },
        watch: {},
        methods: {
          topSelClose(item) {
            this.topSel.splice(this.topSel.indexOf(item), 1);
          },
          topSelChange(item) {
            if (this.topSel.indexOf(item.label) == -1) {
              this.topSel.push(item.label);
            } else {
              this.topSel.splice(this.topSel.indexOf(item.label), 1);
            }
          },
          // 修改部分 监听跳转
          toRouter(index) {
            this.headerAct = index;
          },
        },
      });
    </script>
  </body>
</html>
